<template>
    <div class="progress" v-show="loadState">
        <el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
        <!--气泡提示信息-->
        <!--<el-dialog class="dcimToast" :visible.sync="toast">请求超时</el-dialog>-->
    </div>
</template>

<script>
    // import { DIALOG } from '../mixins/dialog'
    export default {
        name: "progressBar",
        // mixins: [DIALOG],
        props: {
            progressState: {
                type: Object,
                default: function () {
                    return {
                        data: false
                    }
                }
            }
        },
        data() {
            return {
                percentage: 0,
                colors: [
                    {color: '#f56c6c', percentage: 20},
                    {color: '#e6a23c', percentage: 40},
                    {color: '#5cb87a', percentage: 60},
                    {color: '#1989fa', percentage: 80},
                    {color: '#6f7ad3', percentage: 100}
                ],
                timeMove: null,
                loadState: false,
                distanceTime: null
            }
        },
        watch: {
            'progressState.data': function (val) {

                const $this = this

                $this.percentage = 0

                clearInterval($this.timeMove)

                if (val) {

                    $this.loadState = true

                    $this.timeMove = setInterval(() => {

                        $this.percentage += 1

                        if ($this.percentage > 99) {

                            $this.percentage = 99

                            clearInterval($this.timeMove)

                        }

                    }, 100)

                    $this.distanceTime = setTimeout(() => {

                        if ($this.progressState.data) {

                            $this.distanceTimeOut()

                        }

                    }, 60 * 1000)

                } else {

                    clearTimeout($this.distanceTime)

                    $this.percentage = 100

                    setTimeout(() => {

                        $this.loadState = false

                    }, 300)

                }

            }
        },
        methods: {
            distanceTimeOut() {

                const $this = this

                $this.clearTimeMove()

                // $this.toast = true
                //
                // $this.toastMove()

                $this.loadState = false

                $this.progressState.data = false

            },
            clearTimeMove() {

                this.timeMove = null

                clearInterval(this.timeMove)

            }
        },
        beforeDestroy() {

            this.clearTimeMove()

            clearTimeout(this.distanceTime)

        }
    }
</script>

<style scoped lang="stylus">
    >>>.el-progress__text
        color: #6c9bf2
    >>>.el-progress
        left: 50%
        top: 50%
        transform: translate(-50%, -50%)
    .progress
        position: fixed
        top: 0
        right: 0
        bottom: 0
        left: 0
        background: rgba(0, 0, 0, .8)
        z-index: 999999999
</style>